<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form
        :inline="true"
        :model="searchParams"
        ref="searchForm"
        label-position="top">
        <el-form-item label="手机号：" prop="name">
          <el-input v-model="searchParams.phone" placeholder="手机号" />
        </el-form-item>
        <el-form-item label="注册日期：" prop="url">
          <el-date-picker
            v-model="daterange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="margin-right:10px"
            @change="pickDate">
          </el-date-picker>
          <el-button type="primary" @click="getTableData(1)">查询搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      :data="tableData"
      border
      v-loading="loading"
      style="width: 100%">
      <el-table-column prop="id" label="用户ID"> </el-table-column>
      <el-table-column prop="portrait" label="头像">
        <template v-slot="scope">
          <img class="avatar" :src="scope.row.portrait || 'http://www.lgstatic.com/thumbnail_100x100/i/image2/M01/5E/65/CgotOVszSAOANi0LAAAse2IVWAE693.jpg'" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="用户名"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="createTime" label="注册时间"> </el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <div
            class="status-cicle"
            :style="{
              background: scope.row.status==='DISABLE'?'red':'green'
            }"
          ></div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
           <el-button type="text" @click="handleDisabled(scope.row)">禁用</el-button><br>
           <el-button type="text" @click="allocRole(scope.row.id)">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchParams.currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="searchParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :disabled="loading"
      :total="total">
    </el-pagination>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%">
        <el-select v-model="roleIdList" multiple>
          <el-option
            v-for="item in allRole"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script lang="ts">
import Vue from 'vue'
import { getUserPages } from '@/services/user'
import { getAllRole, getUserRole, allocateUserRoles } from '@/services/role'

export default Vue.extend({
  name: 'UserIndex',

  data () {
    return {
      daterange: [],
      searchParams: {
        phone: null,
        currentPage: 1,
        pageSize: 5,
        endCreateTime: null,
        startCreateTime: null
      },
      loading: false,
      tableData: [],
      total: 0,
      allRole: [],
      dialogVisible: false,
      curUserId: -1,
      roleIdList: [],
      resourceForm: {
        id: '',
        name: '',
        url: '',
        categoryId: '',
        description: ''
      }
    }
  },

  mounted () {
    this.getTableData()
    this.loadAllRole()
  },

  methods: {
    pickDate (e: any) {
      this.searchParams.startCreateTime = e[0]
      this.searchParams.endCreateTime = e[1]
    },

    getTableData (current: number | void) {
      if (current) {
        this.searchParams.currentPage = current
      }
      this.loading = true
      getUserPages(this.searchParams).then((res: any) => {
        if (res.data.code === '000000') {
          const { records, total } = res.data.data
          this.tableData = records
          this.total = total
        }
      }).finally(() => {
        this.loading = false
      })
    },

    loadAllRole () {
      getAllRole().then(res => {
        if (res.data.code === '000000') {
          this.allRole = res.data.data
        }
      })
    },

    handleCurrentChange (val: number) {
      this.searchParams.currentPage = val
      this.getTableData()
    },

    handleSizeChange (val: number) {
      this.searchParams.pageSize = val
      this.searchParams.currentPage = 1
      this.getTableData()
    },

    reset () {
      this.daterange = []
      this.searchParams = {
        phone: null,
        currentPage: 1,
        pageSize: 5,
        endCreateTime: null,
        startCreateTime: null
      }
      this.getTableData()
    },

    handleDisabled () {
      this.$message.warning('暂时不考虑随便禁用')
    },

    allocRole (userId: any) {
      this.curUserId = userId
      this.loadUserRole()
      this.dialogVisible = true
    },

    loadUserRole () {
      getUserRole(this.curUserId).then((res: any) => {
        if (res.data.code === '000000') {
          this.roleIdList = res.data.data.map((i: any) => i.id)
        }
      })
    },

    submitForm () {
      allocateUserRoles({
        roleIdList: this.roleIdList,
        userId: this.curUserId
      }).then((res: any) => {
        if (res.data.code === '000000') {
          this.$message.success(this.resourceForm.id ? '编辑成功' : '添加成功')
          this.dialogVisible = false
          this.getTableData()
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
})
</script>

<style lang="scss" scoped>
.avatar{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.status-cicle{
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
</style>
